<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        /* 刻度时钟 */
        .time-clock{
            width: 300px;
            height: 300px;
            border: 5px solid yellowgreen;
            border-radius: 50%;
            margin: 50px;
            position: relative;
            left: 560px;
        }
        /* 表盘 */
        .time-clock ul{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .time-clock ul li{
            width: 2px;
            height: 8px;
            background: yellowgreen;
            position: absolute;
            left: 50%;
            top:0;
            transform-origin:center 150px ;
        }
        /* .time-clock ul li:nth-child(2){
            transform: rotate(6deg);
            transform-origin:center 150px ;
        }
        .time-clock ul li:nth-child(3){
            transform: rotate(12deg);
            transform-origin:center 150px ;
        } */
        #hour {
            width: 6px;
            height: 50px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-50px 0 0 -3px;
            transform-origin:center bottom ;
        }
        #minu{
            width: 4px;
            height: 80px;
            background: blueviolet;
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-80px 0 0 -2px;
            transform-origin:center bottom;
        }
        #second{
            width: 2px;
            height: 120px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin:-120px 0 0 -1px;
            transform-origin:center bottom;
        }
    #ball{
        width: 20px;
        height: 20px;
        background: black;
        position: absolute;
        left: 50%;
        top:50%;
        border-radius: 50%;
        transform:translate(-50%,-50%);
    }
/* —————————————————————————————————————————————— */
    /* 电子时钟 */
    #main{
        width: 600px;
        height: 300px;
        line-height: 300px;
        margin: 50px 180px 0 500px;
        text-align: center;
        background-color: black;
        border-radius: 70px;
        box-shadow: -10px -10px 20px rgba(255,255,255,.5),
        10px 10px 20px rgba(70,70,70,.12);
    }
    #clock{
        font-size: 60px;
        color: white; 
        letter-spacing: 25px;
    }
    </style>
</head>
 
 
 
 
<body>
    <!-- 刻度时钟 -->
   <div class="time-clock">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="hour"></div>
    <div id="minu"></div>
    <div id="second"></div>
    <div id="ball"></div>
</div>
    <!-- 电子时钟 -->
    <div id="main">
        <div id="clock">12:00:00</div>
    </div>
<!-- —————————————————————————————————— -->
 
    <script>
        //刻度时钟
        var ul =document.querySelector(`ul`);
        var hour =document.querySelector(`#hour`);
        var minu =document.querySelector(`#minu`);
        var second =document.querySelector(`#second`);
        //这里别忘加#，因为是id
 
 
        for(var i=0;i<60;i++){
            var li = document.createElement(`li`);
            li.style.transform = `rotate(`+i*6+`deg)`;
            if(i%5==0){
                li.style.height=`18px`
            }
            ul.appendChild(li);
        }
        //定时器
        function run(){
            var date = new Date();
            var iH = date.getHours();
            var iM = date.getMinutes();
            var iS = date.getSeconds();
            console.log(iH,iM,iS);
 
            hour.style.transform = `rotate(`+(iH*30+iM/2)+`deg)`
            minu.style.transform = `rotate(`+iM*6+`deg)`
            second.style.transform = `rotate(`+iS*6+`deg)` 
        }
        run();
 
        setInterval(run,1000);
 
 
 
        //————————————————————————————————————
        //电子时钟
        let oClock=document.querySelector(`#clock`);
        let addZero = (num) =>{
            if(num>=10){
                return num;
            }else{
                return `0${num}`;
            }
        }
        let updateTime=()=>{
            let now = new Date();
            let time = addZero(now.getHours())+":"+
            addZero(now.getMinutes())+":"+
            addZero(now.getSeconds());
            oClock.innerText = time;
        }
        updateTime();
        setInterval(updateTime,1000);
    </script>
 
  
</body>
</html>